<template>
    <div class="app-menu-list">
        <ul>
            <li v-for="menuGroup in menus" :key="menuGroup.name">
                <div class="app-menu-group-name">
                    <span>{{ menuGroup.name }}</span>
                </div>
                <ul>
                    <li
                        v-for="menu in menuGroup.children"
                        :key="menu.title"
                        @click="handleClickMenu(menu)"
                        :class="{
                            'app-menu-active': currentPath === menu.page,
                        }"
                    >
                        <div class="app-menu-name">
                            <span>{{ menu.name }}</span>
                            <span>{{ menu.title }}</span>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { AppNavigator } from '../navigator/app-navigator';
import { AppMenu, MENUS } from './menus';

export default {
    name: 'app-menu',
    props: {
        currentPath: { type: String },
    },
    setup() {
        const navigator = AppNavigator.use.inject();

        return {
            menus: MENUS,
            handleClickMenu(menu: AppMenu) {
                navigator.methods.go(menu.page);
            },
        };
    },
};
</script>

<style lang="scss">
.app-menu-list {
    height: 100%;
    overflow: auto;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        .app-menu-name,
        .app-menu-group-name {
            font-size: 14px;
            padding: 10px 24px 12px 32px;
            white-space: nowrap;
            color: #333;
            cursor: pointer;
            transition: all 300ms linear;

            &:hover {
                background-color: rgba(#42b983, 0.1);
                color: #42b983;
            }
        }

        .app-menu-name {
            position: relative;

            & > span {
                &:nth-child(2) {
                    font-size: 12px;
                    margin-left: 0.5em;
                    color: #ccc;
                }
            }

            .pl-icon {
                position: absolute;
                right: 16px;
                line-height: 40px;
            }
        }

        .app-menu-group-name {
            padding-left: 24px;
            letter-spacing: 1px;
            font-size: 12px;
            font-weight: 600;
            color: #42b983;
        }
    }

    &:after {
        position: absolute;
        top: 0;
        bottom: 0;
        right: -30px;
        width: 30px;
        content: '';
        box-shadow: inset 10px 0 8px -8px #f0f1f2;
    }
}
</style>